<script setup>
import { io } from "socket.io-client";
import { useRouter } from "vue-router";
import { reactive, ref, getCurrentInstance, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const { $untils } = proxy;
const router = useRouter();
import { history } from "@/api/chatRoom";
const state = reactive({
  username: router.currentRoute.value.query.username ?? "",
  msgText: "",
  userList: [],
  myUser: null,
  targetUser: null,
});
const username = sessionStorage.getItem("username");
const room = sessionStorage.getItem("roomId");
const chatContent = ref(null);

const socket = io("http://localhost:4000", {
  query: {
    username: username,
    room: room,
  },
});

// -----------加入房间 -----------
socket.emit("joinRoom", { username, room });
// 获取房间用户列表
socket.on("roomUsers", (res) => {
  state.userList = res;
  console.log(state.userList);
});
// 获取进入聊天室提示
socket.on("joinMessage", (res) => {
  $untils.appendWelcome(res);
});

// ------------退出聊天室--------
function quit() {
  sessionStorage.removeItem("mode");
  sessionStorage.removeItem("username");
  sessionStorage.removeItem("roomId");
  // 断开socketio连接
  socket.disconnect();
  router.push("/login");
}
// ------------发送消息--------

function sendMsg() {
  if (!state.msgText.length) return;

  // 发送
  socket.emit("chatMessage", {
    from: username,
    to: room,
    message: state.msgText,
    time: new Date().getTime(),
  });
  //页面渲染消息
  $untils.appendMessage(
    {
      message: state.msgText,
      time: new Date().getTime(),
    },
    true
  );
  // 自动滚到聊天底部
  $untils.scrollToBottom(chatContent.value);
  state.msgText = "";
}

// ------------接收消息--------
socket.on("message", (msg) => {
  //页面渲染消息

  if (msg.from != username) {
    $untils.appendMessage({
      message: msg.message,
      time: msg.time,
    });
  }

  // 自动滚到聊天底部
  $untils.scrollToBottom(chatContent.value);
});

// ------------消息复现------------
onMounted(() => {
  history({ room })
    .then((res1) => {
      let res = res1.data.data;
      console.log(res.data);

      chatContent.value.innerHTML = "";
      for (let i = 0; i < res.length; i++) {
        console.log(res[i]);

        if (res[i].from == username) {
          $untils.appendMessage(
            {
              message: res[i].message,
              time: res[i].timestamp,
            },
            true
          );
        } else {
          $untils.appendMessage({
            message: res[i].message,
            time: res[i].timestamp,
          });
        }
      }
      // 自动滚动到聊天底部
      $untils.scrollToBottom(chatContent.value);
    })
    .catch((err) => {
      console.log(err);
    });
});
</script>
<template>
  <div class="container">
    <div class="leftSide">
      <!--header-->
      <div class="header">
        <div class="userimg">
          <img src="@/assets/images/用户.png" class="cover" />
        </div>
        <p>{{ username }}</p>
        <button @click="quit">退出</button>
      </div>
      <!--ChatList-->
      <div
        class="chatlist"
        v-for="(item, index) in state.userList"
        :key="index">
        <div class="block">
          <div class="imgbx">
            <img src="@/assets/images/user.png" class="cover" />
          </div>
          <div class="details">
            <div class="listHead">
              <h4>{{ item }}</h4>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="rightSide">
      <div class="header">
        <div class="imgText">
          <img src="@/assets/images/聊天室.png" />
          <h4>{{ room }}</h4>
        </div>
        <!-- <ul class="nav_icons">
          <li><img src="@/assets/images/消息.png" /></li>
          <li><img src="@/assets/images/更多.png" /></li>
        </ul> -->
      </div>
      <!--chatbox-->
      <div class="chatBox test-1" ref="chatContent">
        <!-- <p class="welcome">欢迎。。。。。。叫你如聊天室</p> -->
      </div>

      <!--chat input-->
      <div class="chatbox_input">
        <div class="instrument">
          <img style="width: 30px" src="@/assets/images/表情.png" />
          <img style="width: 30px" src="@/assets/images/语音.png" />
        </div>
        <div>
          <textarea
            type="text"
            v-model="state.msgText"
            @keydown.enter="sendMsg"></textarea>
        </div>
        <div>
          <button class="sendMsg" @click="sendMsg">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
/* @import url("https://fonts.googleapis.com css2?family-Open+Sans:wght@300;400;00;600;700&display=swap"); */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: url("@/assets/images/1.png");
  background-size: cover;
}
.container {
  border-radius: 20px;
  opacity: 0.8;
  overflow: hidden;
  position: relative;
  width: 60vw;
  max-width: 100%;
  height: calc(100vh - 100px);
  background: #fff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.06);
  display: flex;
}
.container .leftSide {
  position: relative;
  flex: 25%;
  background: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.container .rightSide {
  position: relative;
  flex: 75%;
  background: #e5ddd5;
}
.container .rightside::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(img6-bg.jpg);
  opacity: 0.06;
}
.header {
  position: relative;
  top: 0;
  width: 100%;
  height: 10%;
  background: #ededed;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
}
.userimg {
  position: relative;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  cursor: pointer;
}
.cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav_icons {
  display: flex;
}
.nav_icons li {
  display: flex;
  list-style: none;
  cursor: pointer;
  color: #51585c;
  font-size: 1.5em;
  margin-left: 22px;
}

.chatlist {
  position: relative;
  height: calc(100%-110px);
  overflow-y: auto;
}
.chatlist .block {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.chatlist .block.active {
  background: #ebebeb;
}
.chatlist .block:hover {
  background: #f5f5f5;
}
.chatlist .block .imgbx {
  /* height: 45px; */
  position: relative;
  min-width: 45px;
  height: 45px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 10px;
}
.chatlist .block .details {
  position: relative;
  width: 100%;
}
.chatlist .block .details .listHead {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.chatlist .block .details .listHead h4 {
  font-size: 1.1em;
  font-weight: 600;
  color: #111;
}
.chatlist .block .details .listHead .time {
  font-size: 0.75em;
  color: #aaa;
}
.chatlist .block .details .listHead .time {
  color: #111;
}

.message_p {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.message_p p {
  color: #aaa;
  display: -webkit-box;
  -webkit-line-break: 1;
  font-size: 0.9em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.message_p b {
  background-color: red;
  color: #fff;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.75em;
}
.imgText {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.imgText h4 {
  font-weight: 500;
  line-height: 1.2em;
  margin-left: 10px;
}
.imgText img {
  width: 30px;
}
.chatBox {
  position: absolute;
  background-color: #f5f5f5;
  top: 10%;
  width: 100%;
  height: 65%;
  border-bottom: 2px solid #eeeeee;
  padding: 50px;
  overflow-y: auto;
}
.message {
  position: relative;
  display: flex;
  width: 100%;
  margin: 5px 0;
}
.message p {
  position: relative;
  right: 0;
  text-align: right;
  max-width: 65%;
  padding: 12px;
  background: #dcf8c6;
  border-radius: 10px;
  font-size: 0.9em;
}
.message p::before {
  content: "";
  position: absolute;
  top: 0;
  right: -12px;
  width: 20px;
  height: 20px;
  background: linear-gradient(
    135deg,
    #dcf8c6 0%,
    #dcf8c6 50%,
    transparent 50%,
    transparent
  );
}
.message p span {
  display: block;
  margin-top: 5px;
  font-size: 0.85em;
  opacity: 0.5;
}
.my_message {
  justify-content: flex-end;
}
.frnd_message {
  justify-content: flex-start;
}
.frnd_message p {
  background: #fff;
  text-align: left;
}
.message.frnd_message p::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  width: 20px;
  height: 20px;
  background: linear-gradient(
    225deg,
    #fff 0%,
    #fff 50%,
    transparent 50%,
    transparent
  );
}
.chatbox_input {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 25%;
  background: #f5f5f5;
  padding: 15px;
  justify-content: space-between;
  align-items: center;
}
.chatbox_input textarea {
  resize: none;
  background-color: #f5f5f5;
  bottom: 10%;
  left: 0;
  right: 0;
  top: 30%;
  position: absolute;
  margin: 0 20px;
  padding: 10px 20px;
  border: none;
  outline: none;
  /* border-radius: 30px; */
  font-size: 1em;
}
.sendMsg {
  position: absolute;
  padding: 6px 35px;
  border: none;
  background-color: #e9e9e9;
  color: #31c87a;
  font-size: 15px;
  bottom: 10%;
  right: 5%;
  border-radius: 5px;
}
.sendMsg:hover {
  background-color: #d2d2d2;
  color: #06ae56;
}

.test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(204, 199, 199, 0.2);
  background: #cdc9c9;
}
.test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #e0dbdb;
  /* border-radius: 10px; */
  background: #ededed;
}
.header button {
  margin: 0 0 0 auto;
  background-color: #e7e9ec;
  border-radius: 10px;
  width: 50px;
  height: 30px;
  border: 1px solid #cbcdd1;
}
.header button:hover {
  background-color: rgba(0, 255, 13, 0.3);
}
.welcome {
  text-align: center;
  color: #6a6a6d;
  font-size: 12px;
}
</style>
